<!--
 * @Description: 关于我们页面组件，未完成
 * @Author: hai-27
 * @Date: 2020-02-07 16:23:00
 * @LastEditors: hai-27
 * @LastEditTime: 2020-03-12 19:36:46
 -->
<template>
  <div class="about" id="about" name="about">
    <div class="about-header">
      <div class="about-title">
        <i class="el-icon-tickets" style="color: #ff6700;"></i>
        个人信息
      </div>
    </div>
    <div class="about-content">
      <MyMarkdown></MyMarkdown>
      <el-descriptions class="margin-top" title="" :column="3" :size="size" border>
    <template slot="extra">
      <el-button type="primary" @click="choujiang">抽奖</el-button>
    </template>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user"></i>
        用户名
      </template>
      {{userInfo.userName}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        手机号
      </template>
      {{userInfo.userPhone}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        邮箱
      </template>
      {{userInfo.userEmail}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        积分
      </template>
      <el-tag size="small">{{userInfo.userScore}}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
        账号名
      </template>
      {{userInfo.userAccount}}
    </el-descriptions-item>
  </el-descriptions>

      
          
          <el-dialog
        title="提示"
        :visible.sync="show"
        width="30%"
        :before-close="handleClose">
        <draw></draw>
        <span slot="footer" class="dialog-footer">
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import request from '@/utils/request'
import draw from "@/views/draw"
import MyMarkdown from "../components/MyMarkdown";

import {getToken} from "@/utils/auth"
export default {
  components: {
    MyMarkdown,draw
  },
  data(){
    return{
      show:false,
      userInfo:{},
    }
  },
  created(){
    // 获取浏览器localStorage，判断用户是否已经登录
    if (localStorage.getItem("user")&& getToken()) {
      // 如果已经登录，设置vuex登录状态
      this.getUserInfo()
    }
  },
  methods:{
    choujiang(){
      if (!(localStorage.getItem("user")&& getToken())) {
      // 如果已经登录，设置vuex登录状态
        alert("请先登录")
      }else{
        this.show=true

      }
    },
    getUserInfo(){
      request({
        url: "api/auth/getInfo",
        method: "get",
      }).then((res) => {
        console.log(res)
        this.userInfo=res.user
      });
    },
  }
};
</script>
<style scoped>
.about {
  background-color: #f5f5f5;
}
.about .about-header {
  height: 64px;
  background-color: #fff;
  border-bottom: 2px solid #ff6700;
}
.about .about-header .about-title {
  width: 1225px;
  margin: 0 auto;
  height: 64px;
  line-height: 64px;
  font-size: 28px;
}
.about .content {
  padding: 20px 0;
  width: 1225px;
  margin: 0 auto;
}
.about .content .goods-list {
  margin-left: -13.7px;
  overflow: hidden;
}
.about .about-content {
  width: 1225px;
  margin: 0 auto;
  background-color: #fff;
}
</style>
